<template>
  <div class="d-flex flex-column flex-root">
    <div
      class="login login-1 d-flex flex-column flex-lg-row flex-column-fluid bg-white login-signin-on"
      id="kt_login"
    >
      <!--begin::Aside-->
      <div
        class="login-aside d-flex flex-column flex-row-auto"
        style="background: linear-gradient(to right, #68dde0, #c9f7f5)"
      >
        <div class="d-flex flex-column-auto flex-column pt-lg-40 pt-15">
          <a href="#" class="text-center mb-10">
            <img src="media/logos/letoy-logo.png" class="max-h-150px" alt="" />
          </a>
          <h3
            class="font-weight-bolder text-center font-size-h4 font-size-h1-lg"
            style="color: #3078c7"
          >
            国内优质在线学习平台<br />
            由乐游工作室提供多门免费课程
          </h3>
        </div>
        <div
          class="aside-img d-flex flex-row-fluid bgi-no-repeat bgi-position-y-bottom bgi-position-x-center"
          style="
            background-image: url('/media/svg/illustrations/background.svg');
          "
        ></div>
      </div>
      <!--begin::Aside-->
      <!--begin::Content-->
      <div
        class="login-content flex-row-fluid d-flex flex-column justify-content-center position-relative overflow-hidden p-7 mx-auto"
      >
        <div class="d-flex flex-column-fluid flex-center">
          <!--begin::Signin-->
          <transition name="plus-icon" mode="out-in">
            
          </transition>
          <!--end::Signin-->

          <transition name="plus-icon" mode="out-in">
            <component :is="componentName"></component>
          </transition>
        </div>
        <!--begin::Content footer-->
        <div
          class="d-flex justify-content-lg-start justify-content-center align-items-end py-7 py-lg-0"
        >
          <a
            href="https://letoy.site"
            target="_blank"
            class="text-primary font-weight-bolder font-size-h5"
            >©{{ year }} 乐游工作室</a
          >
          <a
            href="https://letoy.site"
            target="_blank"
            class="text-primary ml-10 font-weight-bolder font-size-h5"
            >关于</a
          >
          <a
            href="https://letoy.site"
            target="_blank"
            class="text-primary ml-10 font-weight-bolder font-size-h5"
            >联系我们</a
          >
        </div>
        <!--end::Content footer-->
      </div>
      <!--end::Content-->
    </div>
  </div>
</template>

<!-- Load login custom page styles -->
<style lang="scss">
@import "@/assets/sass/pages/login/login-1.scss";
.warning {
  margin-top: 3px;
  font-size: 13px;
  color: #fb6868;
  height: 5px;
}
</style>
<style scoped>
.btn.btn-secondary {
  background-color: #3085d6;
  border-color: #3085d6;
}

 .plus-icon-enter-active{
    transition: all .4s;
  }
  .plus-icon-enter{
     opacity: 0;
  }
  .plus-icon-leave-active{
    transition: all .4s;

  }
  .plus-icon-leave-to{
    transform: translateY(50px);

    opacity: 0;
  }
  .plus-icon-enter-to{
     opacity: 1;
  }

</style>
<script>
import LoginForm from "../../../components/LoginForm"
import RegisterForm from "../../../components/RegisterForm"
import ActiveForm from "../../../components/ActiveForm"
export default {
  name: "login-1",
  data() {
    return {
      year: new Date().getFullYear(),
      componentName:"LoginForm"
    };
  },
  components:{
    LoginForm,
    RegisterForm,
    ActiveForm
  },
  created() {},
  methods: {
    openLoginForm(){
      this.componentName = "LoginForm"
    },
    openRegisterForm(){
      this.componentName = "RegisterForm"

    },
    openActiveForm(){
      this.componentName = "ActiveForm"
    }
  },
};
</script>
